Clock (Hurry Up!) Case Study

            For this project, I wanted to combine fluid motion using fields with modeling to create a fun animation that could be used for an alarm on your phone. In my mind, I was picturing each element of the clock coming into existence one at a time before the message popped up, as well. To do this, I set every aspect of this project up (the bells, numbers, tick marks, body and legs) to be expanded based on some sort of field.
               The end result is this (with gauraud shading lines):

            The minute, second and hour hand are not in this animation, and were instead rendered as different takes and rotated manually in After Effects.

            The components of the tick marks and numbers are separated into three different nulls, shown here:

            All sections work the same way, so let’s use the smaller ticks as an example.

            A plane with no segments in height or width is first placed into a Radial cloner. The Plain effector and the Spline (which is mapped to the Circle) is mapped to the effectors, which ultimately causes the animation to expand.
           
            The Plain effector uses a radial map that turns a full 360 degrees; during this, the circle spline scales up over the next 30 frames. To ensure the tick marks scale properly as they appear, I put “End Transition” to 30 degrees after the first 3 frames of the animation. Midway through, the animation will look like this:
           
            Now, for the numbers.
For maximum efficiency, two MoTexts were assigned to them (1 and 12) and the cloner type was set to “Blend”. This would ensure the numbers would read from one to twelve.
           
            These numbers were then extruded and given a PolyFX to function as it would with the radial field. The field it uses is exactly the same as that of the tick marks, except the numbers do not move outwards, and a delay effector is added to the layering to give a bigger bounce effect:

            “Spring”, of course, is amazing for MoGraph, so it was used for the bounce effect. This was also used for the body of this image.

            The texturing was all done by hand in the Cinema 4D materials section. Each part of the clock has its own reflective properties, and is given a subtle noise map for added realism. A sky with an HDRI of a cloudy sky is added to the project, as well, which is to give the bells and the clock’s outer rim the shine that it now has.
           
            However, this is not quite what the clock looks like in the video. As you can see, there are obvious blue outlines on the bells and the border. That’s okay, though, because with Multi Pass, I was able to separately render how the reflectance (as well as the diffuse, shadows and material color) and tweak it to become more realistic in post.

            Now, for the text.

            This was made extremely quickly.

            Each light represents its place in the render, and each light is rendered out separately to be tweaked in the post production. Since the background is yellow, I already know that the lighting is wrong, but it would be unwise to change that in Cinema since I cannot actually see how the background works with the text yet.

            The box field goes straight across the text, and the delay field causes the text to have a loose jiggle effect. Because I was doing this so quickly, the render of the animation is actually really bad, but it is ignored because I know that I can mask out the letters from H to P in order of when they should appear:

            I also gave it a cycling hue for extra flare.

            There is a lot to cover here. First and foremost, the duplicate copies of Diffuse, Reflection, etc. are quite literally copies of the clock itself that appear on the frame the next one times out. This is because I rendered out the clock as a PNG sequence, but rather than letting it render out to the full animation’s length, I would render it exclusively from the hands and copy its existence in post to extend its runtime.

            The green screen is keyed out for the next part of the animation, where the text comes into play:

            I also added a drop shadow to the clock.

            Overall, this was a lot of work, but I also learned a lot from it. I enhanced my knowledge on how fields and effectors work, and tried my hand on some newer mechanics that I had otherwise avoided, like the Delay effector. Because of all the new things I was learning about the machine, this took weeks to develop, but now that I know them, I am confident that I can recreate something like this much faster.

            One of the main issues with working on this was the fact that I was using so many fields that the program began to lag, making it difficult to comprehend how fast my animation was moving. This is a crucial workflow issue to fix, for obvious reasons, and I will continue to look into how I can more efficiently use these fields. I could also try my hand on improving the texturing to make it look more fun; perhaps a balloon-style feel to it. But all in all, I am proud of this project, and I will certainly be looking on back on it for improvements.
Hurry Up!
Published:

Hurry Up!

Published: